<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMeta } from "vue-meta";

const dataList = ref<Data[]>([]);
console.log(dataList);
let num: number = 0;
let num2 = ref<number>(0);
console.log(num);

let anna = ref<Person>({
  name: "anna",
  age: 18,
  gender: "female",
  like: "read",
});
console.log(anna.value);

let fn: InspectFn = function (s1, s2) {
  return s1.length > s2;
};
fn("hello", 3);
// --接口

interface InspectFn {
  (x: string, y: number): boolean;
}
interface Person {
  name: string;
  age: number;
  gender?: string;
  [attribute: string]: any;
}

interface Data {
  name: string;
  value: string;
}

onMounted(() => {
  useMeta({
    title: "笑小枫🍁 - 程序员的世外桃源",
    meta: [
      { name: "keywords", content: "笑小枫,java,SpringBoot,程序员" },
      {
        name: "description",
        content:
          "欢迎来到笑小枫，我们致力于打造一个开放、友好的技术社区，让知识和智慧在这里自由碰撞、绽放。欢迎加入我们的旅程，一起在技术的海洋中探索无限可能！",
      },
    ],
  });
});
</script>

<template>
  <div class="page-container">
    <div class="panel" v-for="(item, idx) in 15">
      <div class="title">
        <h2>项目进度情况</h2>
      </div>
      <div class="steps">
        <el-steps
          style="max-width: 1200px"
          :active="2"
          align-center
          finish-status="success"
        >
          <el-step title="项目立项" description=" " />
          <el-step title="项目需求" description=" " />
          <el-step title="项目采购 " description=" " />
          <el-step title="采购招标 " description=" " />
          <el-step title="中标公告 " description=" " />
          <el-step title="采购合同 " description=" " />
          <el-step title="项目执行 " description=" " />
          <el-step title="项目验收 " description=" " />
          <el-step title="项目评价 " description=" " />
        </el-steps>
      </div>
      <el-divider />
      <div class="descriptions">
        <el-descriptions title="基础信息" size="large">
          <el-descriptions-item label="项目编号:">
            <el-text class="mx-1" size="large">XMBH201406001</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="项目名称:">
            <el-text class="mx-1" size="large">XXXERP系统</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="需求部门:">
            <el-text class="mx-1" size="large">XX部门</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="项目预算:">
            <el-text class="mx-1" size="large">￥780，000</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="项目阶段:">
            <el-text class="mx-1" size="large">项目立项</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="">
            <el-text class="mx-1" size="large"></el-text>
          </el-descriptions-item>
          <el-descriptions-item label="代理机构:">
            <el-text class="mx-1" size="large">XX代理机构</el-text>
          </el-descriptions-item>

          <el-descriptions-item label="服务商:">
            <el-text class="mx-1" size="large">Large</el-text>
          </el-descriptions-item>

          <el-descriptions-item label="中标金额:">
            <el-text class="mx-1" size="large">Large</el-text>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.page-container {
  padding: 20px;
}
.title h2 {
  color: #0ca4d3;
  padding-bottom: 15px;
}
</style>
